<template>
  <div id="page-travel">
    <!-- 查询 -->
    <div class="page-search-list">
      <el-form
        label-position="left"
        :model="travel_from"
        :inline="true"
        ref="travelFromRef"
      >
        <el-form-item
          v-for="(item, i) in travelInfo"
          :label="item.label"
          :key="i"
          style="margin-bottom: 5px;"
        >
          <template v-if="item.prop === 'start_time'">
            <template v-if="!is_time_period">
              <el-date-picker
                type="dates"
                v-model="travel_from.time"
                placeholder="选择一个或多个日期"
                key="time"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                v-model="travel_from.time_period"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                key="time_period"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
          </template>
          <template v-else-if="item.prop === 'cid'">
            <select-community
              :cid.sync="dialog_from[item.prop]"
              :pid.sync="dialog_from.pid"
              :bid.sync="dialog_from.bid"
              :sid.sync="dialog_from.sid"
            ></select-community>
          </template>
          <template v-else>
            <el-input
              v-model="travel_from[item.prop]"
              size="small"
              :placeholder="`请输入${item.label}`"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-search" size="small" @click.native="search">
            搜索
          </el-button>
          <el-button
            type="primary"
            class="el-icon-refresh"
            size="small"
            @click.native="resetSearchFields"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="page-botton-list">
      <el-button
        plain
        class="el-icon-date"
        size="mini"
        @click.native="is_time_period = !is_time_period"
      >
        {{ is_time_period ? '时间查询' : '时间段查询' }}
      </el-button>
      <el-button
        type="warning"
        plain
        class="el-icon-plus"
        size="mini"
        @click="travel_dialog_visible = true"
      >
        新增
      </el-button>
      <el-button
        type="primary"
        plain
        class="el-icon-bell"
        size="mini"
        @click="all_travel_dialog = true"
      >
        新增上报
      </el-button>
      <el-button
        type="danger"
        plain
        class="el-icon-delete"
        size="mini"
        :disabled="is_delete"
        @click="deleteTravel"
        key="delete_arr_button"
      >
        删除
      </el-button>
      <ExportExcel
        style="margin-left: 0.625rem;"
        :id="'travel_tableId'"
        :label="'导出'"
        :multipleSelection="multiple_selection"
        :tableData="travel_table"
        :tableInfo="travel_tableInfo"
      ></ExportExcel>
    </div>
    <!-- 表格 -->
    <div class="page-table">
      <el-table
        ref="travel_tableRef"
        :data="travel_table"
        style="width: 100%;"
        id="travel_tableId"
        @selection-change="selectTabel"
      >
        <el-table-column type="selection" />
        <el-table-column
          v-for="(column, i) in travel_tableInfo"
          :key="i"
          :label="column.label"
          :width="column.label !== '途径' ? '120px' : null"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.label === '途径'">
              <!-- {{ scope.row }} -->
              <el-collapse>
                <el-collapse-item :name="i">
                  <div slot="title" class="el-collapse-title-div">
                    <span>
                      <i class="el-icon-location-outline"></i>
                      起始地：{{ scope.row.start_address }}
                    </span>
                    <span>
                      <i class="el-icon-location"></i>
                      目的地：{{ scope.row.end_address }}
                    </span>
                  </div>
                  <!-- 时间轴 -->
                  <div style="display: flex; justify-content: center;">
                    <el-timeline style="width: 150px;">
                      <el-timeline-item :timestamp="scope.row.start_time">
                        {{ scope.row.start_address }}
                      </el-timeline-item>
                      <el-timeline-item
                        v-for="(pass, index) in scope.row.pass_address"
                        :key="index"
                        :timestamp="pass.time"
                      >
                        {{ pass.address }}
                      </el-timeline-item>
                      <el-timeline-item :timestamp="scope.row.end_time">
                        {{ scope.row.end_address }}
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </template>
            <template v-else>{{ scope.row[column.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              class="el-icon-edit"
              @click="changeTravel(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="warning"
              plain
              size="mini"
              class="el-icon-delete"
              @click="deleteTravel(scope.row.uid, scope.row.uname)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageCount"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tatal"
        class="upload-list-pagination"
      ></el-pagination>
    </div>

    <!-- 添加/修改 弹窗 -->
    <el-dialog
      :title="is_change_travel ? '修改居民行程' : '添加居民行程'"
      :visible.sync="travel_dialog_visible"
      :append-to-body="true"
      width="40%"
    >
      <el-form :model="dialog_from" label-position="left" :rules="rules">
        <el-form-item
          v-for="(item, i) in dialog_info"
          :key="i"
          :label="item.label"
          :prop="item.prop"
          label-width="80px"
        >
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="dialog_from[item.prop]"
              :sid.sync="dialog_from.sid"
              :bid.sync="dialog_from.bid"
              :pid.sync="dialog_from.pid"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'address'">
            <select-address
              :address.sync="dialog_from.address"
              ref="liveAddressRef"
            ></select-address>
          </template>
          <template v-else-if="item.prop === 'start_address'">
            <ul class="ul-address-date">
              <select-address
                :address.sync="dialog_from.start_address"
                ref="start_addressRef"
                class="ul-address-date-item"
              />
              <el-date-picker
                v-model="dialog_from.start_time"
                type="datetime"
                placeholder="选择日期时间"
                class="ul-address-date-item"
                size="small"
              ></el-date-picker>
            </ul>
          </template>
          <template v-else-if="item.prop === 'end_address'">
            <ul class="ul-address-date">
              <select-address
                :address.sync="dialog_from.end_address"
                ref="end_addressRef"
                class="ul-address-date-item"
              />
              <el-date-picker
                v-model="dialog_from.end_time"
                type="datetime"
                placeholder="选择日期时间"
                class="ul-address-date-item"
                size="small"
              ></el-date-picker>
            </ul>
          </template>
          <template v-else-if="item.prop === 'pass_address'">
            <el-button
              class="el-icon-plus"
              @click="inner_visible = true"
              style="width: 100%;"
            >
              添加途径地
            </el-button>
            <el-tag
              v-for="(tag, i) in pass_address_arr"
              :key="i"
              closable
              type="info"
              @close="tagClose(tag)"
              class="address-tag"
            >
              {{ tag.address }}
            </el-tag>
          </template>
          <template v-else-if="item.prop === 'uid'">
            <el-select
              v-model="dialog_from[item.prop]"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="user in dialog_user_list"
                :key="user.id"
                :label="user.name + `（${user.account}）`"
                :value="user.id"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input v-model="dialog_from[item.prop]" size="small"></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="is_change_travel"
          @click="uploadChangeTravel"
        >
          确定修改
        </el-button>
        <el-button v-else type="primary" @click="addClick">
          确定添加
        </el-button>
      </div>
      <!-- 内层弹窗 -->
      <el-dialog :visible.sync="inner_visible" :append-to-body="true">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="时间">
            <el-date-picker
              v-model="temppass_address.time"
              type="datetime"
              placeholder="选择日期时间"
              class="ul-address-date-item"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="地址">
            <select-address
              :initAddress="temppass_address.address"
              :address.sync="temppass_address.address"
              ref="pass_addressRef"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="inner_visible = false">取 消</el-button>
          <el-button type="primary" @click="addpassAddress">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="delete_dialog_visible"
      width="30%"
      center
      :append-to-body="true"
    >
      <div>
        是否删除
        <span v-for="(item, i) in delete_user_arr" :key="i">
          {{ item.name }}
        </span>
        的行程
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="falseDeleteTravel">取 消</el-button>
        <el-button type="primary" @click="trueDeleteTravel">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 行程上报通知 -->
    <el-dialog
      title="添加行程上报"
      :visible.sync="all_travel_dialog"
      :append-to-body="true"
      width="40%"
    >
      <el-form
        :model="all_travel_form"
        :rules="rules_dialog"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="all_travel_form.title" size="small"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            type="text"
            v-model="all_travel_form.content"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="通知社区" prop="cid">
          <select-community :cid.sync="all_travel_form.cid"></select-community>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="all_travel_dialog = false">取 消</el-button>
        <el-button type="primary" @click="addAllClick">
          确定添加
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { rules } from '@/utils/rules'
// API
import { getUserByCommunity } from '@/api/admin/user'
// 组件
import ExportExcel from '@/components/ExportExcel/'
// 工具类
import { isNull, assignAttr } from '@/utils/tool.js'
export default {
  components: { ExportExcel },
  computed: {
    is_delete() {
      return !this.multiple_selection.length > 0
    },
  },
  watch: {
    travel_from: {
      handler(val) {
        console.debug(val)
      },
    },
    travel_dialog_visible: {
      handler(val) {
        if (!val) {
          this.dialog_from = {
            uid: '',
            cid: '',
            pid: '',
            bid: '',
            sid: '',
            address: '',
            start_address: '',
            end_address: '',
            pass_address: [],
          }
          this.inner_visible = false
          this.clearAddress()
        }
      },
    },
    inner_visible: {
      handler(val) {
        if (!val) {
          this.temppass_address = {
            id: '',
            time: '',
            address: '',
          }
          if (isNull(this.$refs.pass_addressRef))
            this.$refs.pass_addressRef.resetAddress()
        }
      },
      immediate: true,
    },
    delete_dialog_visible: {
      handler(val) {
        if (!val) {
          this.delete_user_arr = []
          this.$refs.travel_tableRef.clearSelection()
        }
      },
    },
    all_travel_dialog: {
      handler(val) {
        if (!val) {
          this.all_travel_form = {
            title: '',
            cid: '',
            content: '',
          }
        }
      },
      immediate: true,
    },
    dialog_from: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    'dialog_from.cid': {
      handler(val) {
        if (isNull(val)) {
          console.log('cid', val, isNull(val))
          let data = { layer: 0, id: val }
          this.dialog_user_list = []
          this.getCommunity(data, this.dialog_user_list)
        }
      },
      immediate: true,
    },
    'dialog_from.pid': {
      handler(val) {
        if (isNull(val)) {
          console.log('pid', val, isNull(val))

          let data = { layer: 1, id: val }
          this.dialog_user_list = []
          this.getCommunity(data, this.dialog_user_list)
        }
      },
      immediate: true,
    },
    'dialog_from.bid': {
      handler(val) {
        if (isNull(val)) {
          console.log('bid', val, isNull(val))
          let data = { layer: 2, id: val }
          this.dialog_user_list = []
          this.getCommunity(data, this.dialog_user_list)
        }
      },
      immediate: true,
    },
    'dialog_from.sid': {
      handler(val) {
        if (isNull(val)) {
          console.log('sid', val, isNull(val))
          let data = { layer: 3, id: val }
          this.dialog_user_list = []
          this.getCommunity(data, this.dialog_user_list)
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
      // 查询信息
      travel_from: {
        cid: '', // 根据小区编号查询所有人行程
        uname: '', // 根据用户名查询所有人行程
        time: [], // 选择时间 可多选
        time_period: [], // 时间段
        admin_id: '', // 根据管理员编号查询该管理员发布的行程上报
      },
      travelInfo: {
        cid: { label: '社区', prop: 'cid' },
        uname: { label: '居民姓名', prop: 'uname' },
        admin_id: { label: '管理员编号', prop: 'admin_id' },
        start_time: { label: '日期', prop: 'start_time' },
      },
      is_time_period: false, // 是否以时间段查询
      travel_tableInfo: {
        cid: { label: '社区', prop: 'cid' },
        uname: { label: '居民姓名', prop: 'uname' },
        address: { label: '住址', prop: 'address' },
        pass_address: { label: '途径', prop: 'pass_address' },
        start_time: { label: '起始日期', prop: 'start_time' },
        end_time: { label: '结束日期', prop: 'end_time' },
      },
      travel_table: [
        {
          cid: '宾海小区',
          uid: '10005',
          uname: '张三',
          address: '福建省漳州市芗城区滨海小区4栋5楼',
          start_time: '2020-5-6',
          end_time: '2020-5-7',
          start_address: '七里山塘街',
          end_address: '滨海小区',
          pass_address: [
            {
              address: '苏州园林',
              time: '2020-5-7 15:20:00',
            },
            {
              address: '狮子林',
              time: '2020-5-7 16:56:00',
            },
            {
              address: '寒山寺',
              time: '2020-5-7 19:33:00',
            },
            {
              address: '上海动车站',
              time: '2020-5-7 22:56:21',
            },
          ],
        },
      ],
      multiple_selection: [], // 表格选择
      travel_dialog_visible: false, // 弹窗是否可见
      is_change_travel: false, // 是否修改
      inner_visible: false, // 内层弹窗
      dialog_from: {
        uid: '',
        cid: '',
        pid: '',
        bid: '',
        sid: '',
        address: '',
        start_address: '',
        end_address: '',
        pass_address: [],
      },
      dialog_info: {
        cid: { label: '社区', prop: 'cid' },
        uid: { label: '居民编号', prop: 'uid' },
        address: { label: '住址', prop: 'address' },
        start_address: { label: '起点', prop: 'start_address' },
        end_address: { label: '终点', prop: 'end_address' },
        pass_address: { label: '途径', prop: 'pass_address' },
      },
      dialog_user_list: [], // 根据社区返回用户列表
      pass_address_arr: [], // 存储途径地
      // 单个途径地对象
      temppass_address: {
        id: '',
        time: '',
        address: '',
      },
      delete_dialog_visible: false, //删除弹窗是否可见
      delete_user_arr: [], // 删除的用户数组
      all_travel_dialog: false, //新增上报通知
      all_travel_form: {
        title: '',
        cid: '',
        content: '',
      },
      rules_dialog: {
        title: [{ required: true, message: '请输入标题！', trigger: 'blur' }],
        cid: [{ required: true, message: '请选择社区！', trigger: 'blur' }],
      },
      rules: {
        ...rules,
        uid: [{ required: true, message: '请选择用户', trigger: 'blur' }],
        start_address: [
          { required: true, message: '请选输入起点', trigger: 'blur' },
        ],
        end_address: [
          { required: true, message: '请选输入终点', trigger: 'blur' },
        ],
      },
    }
  },
  created() {},
  methods: {
    /* 请求 */
    // 根据社区返回用户
    getCommunity(data, obj) {
      console.log(5555, data)
      getUserByCommunity(data).then((res) => {
        res.data.forEach((item) => [obj.push(item)])
      })
    },
    /* DOM 操作 */
    // 搜索
    search() {
      console.debug(this.travel_from)
      const data = this.travelFrm
    },
    // 清空搜索条件
    resetSearchFields() {
      this.travel_from = {
        cid: '',
        uname: '',
        time: [],
        time_period: [],
        admin_id: '',
      }
    },
    // 清空地址
    clearAddress() {
      this.$refs.liveAddressRef[0].resetAddress()
      this.$refs.start_addressRef[0].resetAddress()
      this.$refs.end_addressRef[0].resetAddress()
    },
    // 表格选择
    selectTabel(val) {
      this.multiple_selection = val
    },
    // 发布通知
    addAllClick() {},
    // 点击 确定 最外层弹窗
    addClick() {
      this.dialog_from.pass_address = JSON.stringify(this.pass_address_arr)
      this.travel_dialog_visible = false
      this.$message({
        message: '添加成功',
        type: 'success',
      })
    },
    // 点击 取消 最外弹窗
    cancelDialog() {
      this.travel_dialog_visible = false
      this.pass_address_arr = [] // 清空途径数组
    },
    // 点击修改
    changeTravel(row) {
      this.travel_dialog_visible = true
      this.is_change_travel = true
      // 查询居民行程
      console.debug(row)
      assignAttr(row, this.dialog_from)
    },
    // 上传修改的行程
    uploadChangeTravel() {
      this.travel_dialog_visible = false
      this.$message({
        message: '修改成功',
        type: 'success',
      })
    },
    // 删除行程
    deleteTravel(id, name) {
      this.delete_dialog_visible = true
      if (isNull(id) && typeof id === 'string') {
        // 单个删除
        let user = {
          id,
          name,
        }
        this.delete_user_arr.push(user)
        console.debug('删除单个')
      } else {
        this.multiple_selection.forEach((item) => {
          let user = {
            id: item.uid,
            name: item.uname,
          }
          this.delete_user_arr.push(user)
        })
        console.debug('删除数组')
      }
      console.debug(this.delete_user_arr)
    },
    falseDeleteTravel() {
      this.delete_dialog_visible = false
      this.$message('已取消删除')
    },
    trueDeleteTravel() {
      this.delete_dialog_visible = false
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    // 添加途径地
    addpassAddress() {
      this.temppass_address.id = this.pass_address_arr.length
      this.pass_address_arr.push(this.temppass_address)
      this.inner_visible = false
    },
    // 删除途径地
    tagClose(tag) {
      // console.debug('tag', tag)
      this.pass_address_arr.some((item, index) => {
        if (tag.id === item.id) {
          this.pass_address_arr.splice(index, 1)
          return true
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="less" scoped>
#page-travel {
  padding: 0 0.5rem;
  .page-table {
    .el-button {
      margin: 2px 0;
    }
  }
  .el-collapse-title-div {
    display: flex;
    justify-content: space-around;
    width: 90%;
  }
  .el-form-ul {
    min-height: 2.375rem;
    border: 1px solid #dcdfe6;
  }
  /deep/.el-collapse {
    border: none;
    background-color: rgba(255, 255, 255, 0);
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
}
.page-botton-list {
  margin-bottom: 0.625rem;
}
.ul-address-date {
  display: flex;
  .ul-address-date-item {
    flex: 1;
    margin-right: 1.25rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
/deep/.el-select {
  width: 100%;
}
.address-tag {
  margin-right: 0.625rem;
  &:last-child {
    margin-right: 0;
  }
}
.upload-list-pagination {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}
</style>
